<template>
<div class="skillwrapper">
	<div class="loading-container" v-if="hasData">
        <loading :desc="loadingDesc" :showimg="loadingShowimg"></loading>
    </div>
        <!-- content -->
	  <div class="s-list-area" ref="partsw">
	    <div>
		      <!-- 列表 -->
		      <div class="pro-item pro-item-nobd" v-for="(item, index) in datalist">
	            <div class="list-item-con border-none">
	                <div class="desc">
	                	<img v-if="item.photo" @load="loadImage" v-lazy="item.photo" class="skillimg">
	                    <p class="text" v-if="!item.photo">{{item.content}}</p>
	                </div>
	            </div>
	        </div>
	    </div>
	  </div>
	  <!-- content end  -->
</div>
</template>

<script type="text/ecmascript-6">
	import Loading from 'components/loading/loading';
	import BScroll from 'better-scroll';
	import apiUrl from '../../../config/api';
	import axios from 'axios';
	export default {
		data() {
			return {
				loadingDesc: '正在载入...',
				loadingShowimg: true,
				pageCount: 0,
				hasData: true,
				datalist: []
			}
		},
		created() {
			this._getdata();
			this.$nextTick(() => {
				this._initScroll();
			})
		},
		methods: {
			_initScroll() {
				this.PartListScroll = new BScroll(this.$refs.partsw, {
					click: true
				});
				var _this = this;			
			},
			_getdata() {
				axios({
					method: 'get',
					url: apiUrl.skill + 2 + '&pageSize=50'
				}).then(response => {
					if(response.data.code === 'SUCCESS') {
						if(response.data.data.list.length > 0) {
							this.hasData = false;
							for (var i = 0; i < response.data.data.list.length; i++) {					
								this.datalist.push(response.data.data.list[i]);
								if(this.datalist[i].contentCategory === '1') {
									this.$set(this.datalist[i],'photo',this.datalist[i].content);
								}
							}
						}
					} else {
						this.loadingShowimg = false;
						this.loadingDesc = response.msg;
					}
				})
			},
			loadImage() {
				this.PartListScroll.refresh();				
			}
		},
		components: {
			Loading
		}
	}
</script>
